<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>短租</title>
<mystyle>
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">
</mystyle>
</head>
<body data-spy="scroll" data-target="#scrollpry" style="position: relative;">
<div id="branchimg">
    <div class="w1217 center clearfix">
        <img id="bigimg" width="681" height="439" class="pull-left block" src="/public/image/${rentDTO.houseInfoImagesGuid[0]}">

        <div class="pull-left w535" id="simg">
            <c:forEach items="${rentDTO.houseInfoImagesGuid}" var="imagesGuid" varStatus="status">
                <c:if test="${status.index <4}">
                <c:if test="${status.index <2}">
                    <div class="pull-left ml5"><img class="block" src="/public/image/${imagesGuid}"></div>
                </c:if>
                <c:if test="${status.index>=2}">
                    <div class="pull-left ml5 mt5"><img class="block" src="/public/image/${imagesGuid}"></div>
                </c:if>
                </c:if>
            </c:forEach>
        </div>
    </div>
</div>
<div id="demain">
<div id="dsput">
    <div id="staticposition"></div>
    <div id="scrollpry">
        <div id="line1">
            <div class="w1217 center clearfix">
                <div class="pull-left datebox"><label class="msfont pull-left">入住日期</label>

                    <div class="cal pull-left"><input type="text" readonly="value" class="txt box-line"  value="${rentDTO.checkInDate}"></div>
                </div>
                <div class="pull-left datebox"><label class="msfont pull-left">离店日期</label>

                    <div class="cal pull-left"><input readonly="value" class="txt box-line"  value="${rentDTO.leaveDate}"></div>
                </div>
                <a href="/rent/pay/${rentDTO.guid}">
                    <button id="cjbtn" class="pull-right msfont ml20">填写订单</button>
                </a>

                <div class="pull-right price">￥<span class='cred'>${rentDTO.price}</span></div>
            </div>
        </div>
        <div id="line2" class="msfont">

            <ul class="w1217 center clearfix">
                <li><a href="#dec1">度假屋详情</a></li>
                <li><a href="#dec2">基本信息</a></li>
                <li><a href="#dec3">配套设施</a></li>
                <li><a href="#dec4">增值服务</a></li>
                <%--<li><a href="#dec5">地理位置</a></li>--%>
                <li><a href="#linkelink">相似房源</a></li>
            </ul>

        </div>
    </div>
</div>
<div id="decontent" class="msfont">

<div id="dec1">
    <div class="w1217 center clearfix">
        <div class="tx"><img src="/public/image/${rentDTO.ownerPhotoGuid}">

            <P>${rentDTO.ownerName}</P>
        </div>
        <div class="key">
            <div class="htt">${rentDTO.houseName}</div>
            <div class="keyword">${rentDTO.address}</div>
            <div class="keyico mt10">
                <ul class="clearfix">
                    <li>
                        <div class="icon1"></div>
                        <p>${rentDTO.roomType}</p></li>
                    <li>
                        <div class="icon2"></div>
                        <p>${rentDTO.personNum}位房客</p></li>
                    <li>
                        <div class="icon3"></div>
                        <p></p></li>
                </ul>
            </div>
        </div>
        <div class="decription">${rentDTO.information}<i class="fa fa-plus"></i>
        </div>
    </div>
</div>

<div id="dec2" class="f5bg">
    <div class="w1217 center clearfix">
        <div class="pull-left"><img class="block" src="/static/static/images/f1.jpg"></div>
        <div class="pull-left">
            <table class="dtable">
                <tr>
                    <td>床型: 实体床</td>
                    <td>房间类型：${rentDTO.roomType}</td>
                    <td>卫生间： </td>
                    <td>房源类型： 住宿加早餐</td>
                    <td>床位： </td>
                </tr>
                <tr>
                    <td>入住时间： 14:00</td>
                    <td>退房时间： 12:00</td>
                    <td>是否豢养宠物： 狗和猫</td>
                    <td>可住：${rentDTO.personNum}人</td>
                    <td>卧室： </td>
                </tr>
                <%--<tr>--%>
                    <%--<td colspan="5"><a class="coblue" href='#'>《房屋守则》</a></td>--%>
                <%--</tr>--%>
            </table>
        </div>
    </div>
</div>

<div id="dec3" class="f5bg">
    <div class="w1217 center clearfix">
        <div class="pull-left"><img class="block" src="/static/static/images/f2.jpg"></div>
        <div class="pull-left">
            <table class="dtable">
                <tr>
                    <c:forEach items="${rentDTO.supportingDTOs}" var="supporting">
                        <td>${supporting.name}</td>
                    </c:forEach>
                </tr>
                <tr>
                    <c:forEach items="${rentDTO.equipmentDTOs}" var="equipment">
                        <td>${equipment.name}</td>
                    </c:forEach>
                </tr>
            </table>
        </div>
    </div>
</div>

<div id="dec4" class="f5bg">
    <div class="w1217 center clearfix">
        <div class="pull-left"><img class="block" src="/static/static/images/f3.jpg"></div>
        <div class="pull-left mt50 pb50">
            <div class="clearfix"><img class="pull-left decimg" data-img='/static/static/images/p1.jpg'
                                       src="/static/static/images/p-1.jpg">

                <div class="pull-left ml10"><img data-img='/static/static/images/p2.jpg' class="block decimg"
                                                 src="/static/static/images/p-2.jpg">
                    <img class="block decimg mt10" data-img='/static/static/images/p7.jpg'
                         src="/static/static/images/p-7.jpg"></div>
                <img class="pull-left decimg ml10" data-img='/static/static/images/p3.jpg'
                     src="/static/static/images/p-3.jpg"></div>
            <div class="clearfix mt10">
                <img data-img='/static/static/images/p4.jpg ' class="pull-left decimg "
                     src="/static/static/images/p-4.jpg">
                <img class="pull-left decimg ml10" data-img='/static/static/images/p5.jpg'
                     src="/static/static/images/p-5.jpg">
                <img data-img='/static/static/images/p6.jpg' class="pull-left decimg ml10"
                     src="/static/static/images/p-6.jpg"></div>
        </div>
    </div>
</div>
<%--<div id="dec5" class="f5bg">--%>
    <%--<div class="w1217 center clearfix">--%>
        <%--<div class="pull-left"><img class="block" src="/static/static/images/f4.jpg"></div>--%>
        <%--<div class="pull-left">--%>
            <%--<img class="block  mt50 pb50" src="/static/static/images/dt.jpg">--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>
<%--<div id="linkelink">--%>
    <%--<div class="w1217 center clearfix">--%>
        <%--<div class="title">相似房源</div>--%>
        <%--<div id="sildePic">--%>
            <%--<div class="hd">--%>
                <%--<a class="next srollbtn" href="###"><i class="fa fa-chevron-right"></i></a> <a href="###" class="prev srollbtn"><i class="fa fa-chevron-left"></i></a>--%>
            <%--</div>--%>
            <%--<div class="picbody">--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>
                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="slide"><img width="314" height="211" class="block" src="/static/static/images/s1.jpg">--%>

                    <%--<div class="info">--%>
                        <%--<div class="pricede">￥ <span>719</span></div>--%>
                        <%--<img class="txde" src="/static/static/images/tx.jpg">--%>
                        <%--<a href="#" class="titleH1">丽江-金茂山语</a>--%>

                        <%--<P class='infotxt'>独立房间—距离200公里</P>--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>
</div>
</div>
<div class="ipadDemain table-responsive">
    <table class="table table-bordered">
        <tr>
            <th colspan="5">${rentDTO.houseName}</th>
        </tr>
        <tr>
            <td colspan="5">${rentDTO.information}</td>
        </tr>
        <tr>
            <th colspan="5">房屋基本信息</th>
        </tr>
        <tr>
            <td>床型: 实体床</td>
            <td>房间类型：${rentDTO.roomType}</td>
            <td>卫生间： 1</td>
            <td>房源类型： 住宿加早餐</td>
            <td>床位： 1</td>
        </tr>
        <tr>
            <td>入住时间： 14:00</td>
            <td>退房时间： 12:00</td>
            <td>是否豢养宠物： 狗和猫</td>
            <td>可住：${rentDTO.personNum}人</td>
            <td>卧室： 1</td>
        </tr>
        <tr>
            <th colspan="5">便利设施</th>
        </tr>
        <tr>
            <td colspan="5">
                <c:forEach items="${rentDTO.equipmentDTOs}" var="equipment">
                    <span>${equipment.name}</span>
                </c:forEach>
                <c:forEach items="${rentDTO.supportingDTOs}" var="supporting">
                    <span>${supporting.name}</span>
                </c:forEach>
            </td>
        </tr>
            <tr>
                <td colspan="4">
                <div class="detailsInfo" >入店时间:${rentDTO.checkInDate}</div>
                <div class="detailsInfo" >离店时间:${rentDTO.leaveDate}</div>
                <div class="detailsInfo" >价格:${rentDTO.price}</div></td>
                <td style="text-align: center"><a class="btn btn-primary"  style="color: #fff;" href="/rent/pay/${rentDTO.guid}">购买</a></td>
            </tr>
    </table>
</div>

</body>

<script type="text/javascript" src="/static/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/static/static/js/calendar.js"></script>
<script type="text/javascript" src="/static/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/static/js/Slide.js"></script>

<script type="text/javascript">
    jQuery("#sildePic").slide({ mainCell: ".picbody", effect: "leftLoop", vis: 3, scroll: 1});
    $("#simg img").click(function (event) {
        var s = $(this).attr('data-img');
        $("#bigimg").attr('src', s);
    });

    //滚动监听
    $('body').scrollspy({ target: '#scrollpry', offset: 0 });//
    //跟随页面滚动
    var tab = $("#scrollpry").offset().top - 123;

    $(window).scroll(function () {
        $('body').scrollspy('refresh');
        if ($(window).scrollTop() > tab) {
            $("#scrollpry").addClass("go");
            $("#staticposition").show();
        }
        else {
            $("#scrollpry").removeClass("go");
            $("#staticposition").hide();
        }
    });
    //锚点链接缓动
    $('#scrollpry li a').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - $("#scrollpry").height()
        }, 1000);
        event.preventDefault();
    });


    $(function () {
        getUserInfo();
        $('.cnInUl ul li').click(function (e) {
            $(this).addClass('current').siblings().removeClass('current');
        });
        /*nameDetail*/
        $('.nameDetail').css('display', 'none');
        $('.personName').hover(function (e) {
            $('.nameDetail').css('display', 'block');
        }, function () {
            $('.nameDetail').css('display', 'none');
        });

    })


    function getUserInfo() {
//            location.href="/public/userinfo";
        $.ajax({
            url: "/front/user_info/userinfo",
            success: function (data) {
                var userName = data.username;
                $("#userName").html(userName);
                var imageGuid = data.imageGuid;
                if (imageGuid != null) {
                    $("#noLogin").hide();
                    var url = "/public/image/" + imageGuid;
                    $("#userName_1").html("Hi," + data.username);
                    $("#userName_2").html(data.username);
                    $("#useImage").attr("src", url);
                }
            }
        });
    }

    function userDetails() {
        location.href = "/front/user_info/form";
    }

</script>

</html>